<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
p{
	padding:0;
	margin:0;
}
.holding {
	position: relative;
}
.holding input{
outline: 0;
padding: 8px 6px;
width: 382px;
border: 1px solid #CCC;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 1px 0 rgba(255,255,255,0.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 1px 0 rgba(255,255,255,0.2);
line-height:1.5;
}
.holding .holder {
	position: absolute;
	top: 0;
	left: 10px;
	z-index: 1;
	color: #DDD;
	font: 20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	line-height:37px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	white-space: nowrap;
	-webkit-transition: opacity .1s, font-size .1s;
	-moz-transition: opacity .1s, font-size .1s;
	-o-transition: opacity .1s, font-size .1s;
}
.holding input:focus {
	border-color: rgba(82, 168, 236, .75);
box-shadow: 0 0 8px rgba(82,168,236,.5);
-moz-box-shadow: 0 0 8px rgba(82,168,236,.5);
-webkit-box-shadow: 0 0 8px rgba(82,168,236,.5);
}
.holding input:focus + label.holder {
	opacity: .6;
}
.hasome input {
	color:#333
}
.hasome .holder {
	opacity:0;
	filter:alpha(opacity=0);
	font-size:0!important
}
.score{
	display:none;
position: absolute;
margin-top: -24px;
margin-left: 334px;
}
.score span {
width: 50px;
height: 8px;
display: inline-block;
overflow: hidden;
background-color: #EEE;
vertical-align: middle;
border-radius: 3px;
}
.score span b {
display: block;
height: 8px;
width: 25px;
background-color: #6EC02A;
}
.sidetip {
position: absolute;
top:0;
left: 404px;
width: 250px;
margin-top: 14px;
}
.sidetip p{
display: none;
padding-left: 18px;
background-repeat: no-repeat;
background-position: center left;
color: #FFF;
font-size: 13px;
line-height: 16px;
}
.sidetip p.tip {
padding-left: 0;
}
.sidetip p.isaok {
background-image:url(images/accept.png);
color: #390;
}
.sidetip p.checking {
background-image: url(images/spinner-small.gif);
}
.sidetip p.error {
background-image: url(images/error.png);
color: #C33;
}
.sidetip p.active {
display: block;
}
</style>
</head>

<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.password.js"></script>
<script type="text/javascript">
$(function(){
	$(".holding input").live("paste cut keydown keyup focus", 
    function() {
        $.trim($(this).val()) != "" && $(this).parent().addClass("hasome")
    }),
    $(".holding input").blur(function() {
        $.trim($(this).val()) == "" && $(this).parent().removeClass("hasome")
    })
				$('#password').live("paste cut keydown keyup blur", function(){
					   $.trim($(this).val()) != "" && $('.score').show() && $(this).password();
				})
})
</script>
<div class="password">
<div class="holding" data-fieldname="password">
        <div class="sidetip">
          <p class="tip">6个或更多字符! 要复杂些。</p>
          <p class="perfect isaok">密码很完美! </p>
          <p class="ok isaok">密码复杂度还可以。</p>
          <p class="weak isaok">密码强度还可以更高</p>
          <p class="weak error" role="alert">密码不够安全。</p>
          <p class="obvious error" role="alert">密码太明显啦。</p>
          <p class="invalid error" role="alert">密码最少为 6 位。不能包含空格。</p>
          <p class="blank error" role="alert">密码不能为空!</p>
        </div>
        <input type="password" value="" name="password" id="password" >
        <span class="holder">密码</span>
      </div>
      <div class="score"><span><b></b></span></div>
</div>
</body>
</html>
